<template>
  <div class="my no-header">
    <template v-if="userinfo">
      <div class="tx">
        <img :src="userinfo.avatar" alt="" class="img2" />
      </div>
      <div class="nickname">{{userinfo.nickname}}</div>
    </template>
    <template v-else>
      <div class="tx">
        <img v-if="!loading" src="@/assets/images/ai-kf.png" alt="" class="img1" />
      </div>
      <div class="nickname"><template v-if="!loading">暂未登陆</template></div>
    </template>
    <dl class="list mx-auto">
      <dd v-for="(item, index) in list" :key="index" class="item" @click="linkto(item.path)">
        <div class="icon" :class="'icon'+index"><img :src="item.icon" alt=""> </div>
        <span class="name">{{item.name}}</span>
        <icon name="el-icon-ArrowRight" color="#999" />
      </dd>
    </dl>
    <dl v-if="userStore.isLogin" class="list mx-auto">
      <dd v-for="(item, index) in list2" :key="index" class="item" @click="linkto(item.path)">
        <div class="icon" :class="'icon'+(list.length+index)"><img :src="item.icon" alt=""> </div>
        <span class="name">{{item.name}}</span>
        <icon name="el-icon-ArrowRight" color="#999" />
      </dd>
    </dl>
  </div>
  <zb-ai-suport class="wap" />
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { logoutApi, userinfosApi } from '@/api/app';
import { useUserStore } from '@/stores/user'
import myicon1 from '@/assets/images/my-icon1.svg'
import myicon2 from '@/assets/images/my-icon2.svg'
import myicon3 from '@/assets/images/my-icon3.svg';
import { Action , ElMessageBox} from 'element-plus';
import { useRouter } from 'vue-router'
const loading = ref(true)
const router = useRouter()
const userStore = useUserStore()
const list = [
  {icon:myicon1, name:'个人资料', path:'/my/info'},
  {icon:myicon2, name:'完善资料', path:'/my/job'},
]
const list2 = [
  {icon:myicon3, name:'退出登录',}
]
const linkto = async (path:string='') => {
  if(path){
    router.push(path)
  }else{
    ElMessageBox.alert('确定退出本次登录？', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText:'取消',
        showCancelButton:true,
        callback: (action: Action) => {
          console.log('action----', action)
          if(action === 'confirm'){
            logoutApi({}).then(()=>{
              userinfo.value = null;
              userStore.logout();
              // weChatLogin()
              router.push('/')
            });
          }
        },
        
      })
  }
}

// 获取用户信息
const userinfo = ref();
const getInfo = () => {
  userinfosApi().then(res=>{
    userinfo.value = res.userinfo;
    loading.value = false;
    userStore.setUser(res.userinfo);  // 存储用户信息
  }).catch(()=>{
    loading.value = false
  })
  
}
if(userStore.isLogin){
  getInfo();
}
watch(
  () => userStore.isLogin,
  (newVal) => {
    if (newVal) {
      getInfo();
    }
  }
);

</script>
<style lang="scss" scoped>
  .my{padding-top: 5vh;}
  .tx{
    width: 110px; height: 110px; border-radius: 36px;display: flex; align-items: center; justify-content: center; background-color:#DEE9FF; margin: 0 auto 8px; overflow:hidden;
    .img1{width: 90px;}
    .img2{width: 100%; height: 100%; object-fit: cover;}
  }
  .nickname{font-size: 16px; color: #000000; text-align: center; display: flex; align-items: center; justify-content: center; height: 20px; margin-bottom: 20px;}
  $iconw:30px;
  .list{
    max-width: 600px; width: 100%; border-radius: 16px; background-color: #F7F7F7; margin-bottom: 16px;
    .item{
      display: flex; align-items: center; justify-content: space-between; padding:0 18px; height: 53px; position: relative; cursor: pointer;
      &::after{content: ''; width: calc(100% - 14px - $iconw); right: 18px; bottom: 0; position: absolute; height:1px; background-color: #EBEBEB;}
      &:last-child::after{display: none;}
      .name{flex:1; width: 100%; margin-left: 14px; font-size: 16px;}
      .icon{
        width:$iconw; height: $iconw; border-radius: 10px;display: flex; align-items: center; justify-content: center; color:#fff;
        &.icon0{background-color: #67C367;}
        &.icon1{background-color: #2B64F3;}
        &.icon2{background-color: #EE9B3A;}
      }
    }
  }
  
  /***  手机端 **/
  $iconwap:0.6rem;
  $hvH: calc(var(--vh, 1vh) * 100);
  @media only screen and (max-width: 769px){
    .no-header{height: calc($hvH - var(--headerH) - var(--bottomH) ) !important;}
    .my{background-color: #fff; padding: 1.2rem 0.34rem 0; font-size: 0.32rem;}
    .nickname{margin-bottom: 0.4rem; font-size: 0.32rem;}
    .tx{
      width: 2.2rem; height: 2.2rem; border-radius: 0.7rem; margin-bottom: 0.16rem;
      .img1{width: 1.4rem;}
    }
    .list{
      .item{
        height: 1.04rem; padding:0 0.26rem;
        .icon{
          width:$iconwap; height: $iconwap; 
          img{width: 0.36rem;}
        }
        :deep(.el-icon){font-size: 0.32rem !important;}
        .name{margin-left: 0.28rem;}
      }
    }
  }
</style>